import NumberFormatter from "@/components/NumberFormatter";
import {hotDays, hotHours, userHotData} from "@/pages/admin/project/dashboard/userHotData.ts";
import {useAppSelector} from "@/store/store.ts";
import {LoadingOutlined} from "@ant-design/icons";
import {Card, Col, Row, Space, Statistic} from "antd";
import {EChartsOption} from "echarts";
import ReactEcharts from "echarts-for-react"
import EChartsReactCore from "echarts-for-react/lib/core";
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
import {motion} from "framer-motion"
import {ReactNode, useEffect, useRef, useState} from "react";
import {FaUser} from "react-icons/fa";
import {GrDashboard, GrResources} from "react-icons/gr";
import styles from "./index.module.less"

const Dashboard = () => {
    const ref = useRef(null)
    const systemState = useAppSelector(state => state.system)
    // echarts V3版本的配置（主题兼容）
    const echartsV3BaseOption: EChartsOption = {
        textStyle: {
            color: systemState.theme == 'dark' ? '#fff' : '#000'
        },
        title: {
            textStyle: {color: systemState.theme == 'dark' ? '#fff' : '#000'},
        },

    }
    // 热图（用户活跃）
    const userActivityHeatMapOption: EChartsOption = {
        textStyle: {
            ...echartsV3BaseOption.textStyle
        },
        title: {
            text: "用户活跃热图",
            ...echartsV3BaseOption.title
        },
        grid: {
            left: 60,
            right: 60,
            bottom: 20,
            top: 40
        },
        xAxis: {
            type: 'category',
            data: hotHours,
        },
        yAxis: {
            type: 'category',
            data: hotDays,
            splitArea: {
                show: true // 显示背景
            }
        },
        visualMap: {
            min: 0, //
            max: 10,
            right: 'right',  // 将拖拽条放在左侧
            top: 'middle', // 垂直居中
            orient: 'vertical',
            calculable: true,
            textStyle: {
                color: systemState.theme == 'dark' ? '#fff' : '#000'
            }
        },
        series: [
            {
                type: 'heatmap',
                data: userHotData
                    .map(function (item) {
                        return [item[1], item[0], item[2] || '-'];
                    }),
                label: {
                    show: true
                },
            }
        ],
    };
    // 资源类型占比图配置
    const resourcePieOption = {
        darkMode: systemState.theme == 'dark',
        textStyle: {
            color: "#fff",
            fontSize: 16,
            textShadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '80%',
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ],
            }
        ]
    }
    const [resourcePieDataLoading, setResourcePieDataLoading] = useState(true)
    useEffect(() => {
        setTimeout(() => {
            setResourcePieDataLoading(false)
        }, 1200)
    }, []);
    return (
        <div className={styles["dashboard"]} ref={ref}>
            <div className={styles["title"]} style={{display: systemState.isFullScreen ? "flex" : "none"}}>
                <GrDashboard size={38}/>
                <div>
                    仪表盘
                </div>
            </div>
            <Space direction="vertical" style={{width: "100%"}} size={"middle"}>
                <Row gutter={16}>
                    <Col span={6}>
                        <CardMotionWrap duration={0.2}>
                            <Card bordered={false}>
                                <Statistic
                                    title="平台人数"
                                    value={11}
                                    precision={2}
                                    prefix={<FaUser size={18}/>}
                                    suffix="人"
                                    formatter={NumberFormatter}
                                />
                            </Card>
                        </CardMotionWrap>
                    </Col>
                    <Col span={6}>
                        <CardMotionWrap duration={0.4}>
                            <Card bordered={false}>
                                <Statistic
                                    title="资源数"
                                    value={10478}
                                    prefix={<GrResources size={18}/>}
                                    suffix="个"
                                    formatter={NumberFormatter}
                                />
                            </Card>
                        </CardMotionWrap>
                    </Col>
                    <Col span={6}>
                        <CardMotionWrap duration={0.6}>
                            <Card bordered={false}>
                                <Statistic
                                    title="Active"
                                    value={11.28}
                                    precision={2}
                                    valueStyle={{color: '#3f8600'}}
                                    prefix={<FaUser/>}
                                    suffix="%"
                                />
                            </Card>
                        </CardMotionWrap>
                    </Col>
                    <Col span={6}>
                        <CardMotionWrap duration={0.8}>
                            <Card bordered={false}>
                                <Statistic
                                    title="Active"
                                    value={11.28}
                                    precision={2}
                                    valueStyle={{color: '#3f8600'}}
                                    prefix={<FaUser/>}
                                    suffix="%"
                                />
                            </Card>
                        </CardMotionWrap>

                    </Col>
                </Row>

                <motion.div key={systemState.flushPage} initial={{y: 100, opacity: 0.2}} animate={{y: 0, opacity: 1}}
                            transition={{duration: 0.4}}>
                    <Card className={"h-[500px]"}>
                        <ReactEcharts
                            style={{width: "100%", height: 420}}
                            echarts={echarts}
                            option={userActivityHeatMapOption}
                            notMerge={true}
                            lazyUpdate={true}
                            theme={"theme_name"}
                        />
                    </Card>
                </motion.div>

                <Row gutter={16}>
                    <Col span={12}>
                        <motion.div initial={{transform:"translateX(-100px)"}} animate={{transform:"translateX(0)"}} transition={{duration:0.6}}>
                            <Card
                                title={"资源类型占比"}
                            >
                                <div className="h-[300px] flex flex-col items-center justify-center">
                                    {resourcePieDataLoading ?
                                        <Space direction={"vertical"}>
                                            <LoadingOutlined style={{fontSize: 40}}/>
                                            <h3>加载中</h3>
                                        </Space> :
                                        <>
                                            <EChartsReactCore
                                                style={{width: "80%"}}
                                                echarts={echarts}
                                                option={resourcePieOption}
                                                notMerge={true}
                                                lazyUpdate={true}
                                                theme={"theme_name"}
                                            />
                                        </>
                                    }
                                </div>
                            </Card>
                        </motion.div>
                    </Col>
                    <Col span={12}>
                        <motion.div initial={{transform: "translateX(100px)"}} animate={{transform: "translateX(0)"}}
                                    transition={{duration: 0.6}}>

                            <Card title={"访问人数"}>
                                <div className="h-[300px] flex flex-col items-center justify-center">

                                </div>
                            </Card>
                        </motion.div>
                    </Col>
                </Row>

            </Space>
        </div>
);
};

const CardMotionWrap = (props: { children: ReactNode, duration : number }) => {
    const systemState = useAppSelector(state => state.system)

    return (
        <motion.div key={systemState.flushPage} initial={{x: "80vw"}} animate={{x: 0}}
                    transition={{duration: props.duration}}>
            {props.children}
        </motion.div>
    )
}


export default Dashboard;
